import {tVisualEditorActionConfig} from "../../packages/createVisualEditorUser/createVisualEditorAction/createVisualEditorActionConfig";
import {PlFormItem, PlInput, PlObject, useObjectOption, Plc, PlcInput} from "plain-ui";
import {designComponent, PropType, useModel} from "plain-ui-composition";
import {iTableProConfig} from "plain-ui/src/packages/createUseTableOption/createUseTableOption.utils";

/**
 * 预定义动作配置
 * @author  韦胜健
 * @date    2022/2/6 23:36
 */
export function predefineActionConfig({registryActionConfig}: tVisualEditorActionConfig) {
    registryActionConfig('@@fixed', {
        name: '固定地址',
        renderConfig: actionData => {
            return (
                <PlFormItem label="固定链接">
                    <PlInput v-model={actionData.data}/>
                </PlFormItem>
            )
        }
    })

    const pdpConfig = {
        optionConfig: {
            url: '/demo',
            render: () => <>
                <Plc title="编号id" field="id"/>
                <PlcInput title="文本normalText" field="normalText" fixed="left"/>
            </>
        },
        map: {name: 'normalText', id: 'id'},
        showKey: 'name'
    }
    registryActionConfig('pdp', {
        name: '跳转商品',
        renderConfig: actionData => {
            return (
                <PlFormItem label="选择商品">
                    <Picker v-model={actionData.data} {...pdpConfig}/>
                </PlFormItem>
            )
        }
    })

    const categoryConfig = {
        optionConfig: {
            url: '/ov',
            render: () => <>
                <PlcInput title="显示值" field="name"/>
                <PlcInput title="代码" field="code"/>
                <PlcInput title="类型" field="type"/>
                <PlcInput title="说明" field="comment"/>
            </>
        },
        map: {name: 'name', id: 'id'},
        showKey: 'name'
    }
    registryActionConfig('category', {
        name: '跳转分类',
        renderConfig: actionData => {
            return (
                <PlFormItem label="输入分类">
                    <Picker v-model={actionData.data} {...categoryConfig}/>
                </PlFormItem>
            )
        }
    })

    /*registryActionConfig('activity', {
        name: '跳转活动',
        renderConfig: actionData => {
            return (
                <PlFormItem label="选择活动">
                    <PlInput v-model={actionData.data}/>
                </PlFormItem>
            )
        }
    })*/
}

/**
 * 双向绑定选择对象
 * @author  韦胜健
 * @date    2022/2/10 11:31
 */
const Picker = designComponent({
    props: {
        modelValue: {type: Object},
        optionConfig: {type: Object as PropType<iTableProConfig>, required: true},
        map: {type: Object as PropType<Record<string, string>>, required: true},
        showKey: {type: String, required: true}
    },
    emits: {
        onUpdateModelValue: (val?: any) => true,
    },
    setup({props, event: {emit}}) {
        const model = useModel(() => props.modelValue, emit.onUpdateModelValue)
        if (typeof model.value != 'object') {model.value = {}}
        const option = useObjectOption(props.optionConfig)
        const onSelect = (row: any, selected: any) => {
            model.value = Object.entries(props.map).reduce((prev, [rowKey, selectedKey]) => {
                prev[rowKey] = selected[selectedKey]
                return prev
            }, {} as any)
        }
        return () => (
            <PlObject
                row={model.value || {}}
                option={option}
                showKey={props.showKey}
                map={props.map}
                afterSelect={onSelect}
            />
        )
    },
})
